<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item style="font-weight:bolder;">轮播图管理</el-breadcrumb-item>
      <el-breadcrumb-item>轮播图列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card style="margin-top:20px ;">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="#" type="index">
        </el-table-column>
        <el-table-column label="图片" width="180">
          <template slot-scope="scope">
            <div class="demo-image__preview">
              <el-image style="width: 100px; height: 100px" :src="scope.row.imageUrl">
              </el-image>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="轮播图名称" width="180">
        </el-table-column>
        <el-table-column prop="desc" label="轮播图简介" width="180">
        </el-table-column>
        <el-table-column prop="updatedAt" label="时间" width="250">
        </el-table-column>
        <el-table-column label="操作" width="300">
          <template slot-scope="scope">
            <!-- 修改按钮 -->
            <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row.id)" :disabled="isTrue">修改</el-button>
            <!-- 删除按钮 -->
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="removePicById(scope.row.id)" :disabled="isTrue">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="block" style="margin-top: 10px;">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.pagenum"
          :page-sizes="[1, 2, 5, 10]" :page-size="queryInfo.pagesize" layout="total, sizes, prev, pager, next, jumper"
          :total="total"></el-pagination>
      </div>
      <!-- 修改对话框 -->
      <el-dialog title="账号修改" :visible.sync="editDialogVisible" width="50%" @close="editDialogClosed">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="轮播图名称">
            <el-input v-model="ruleForm.name" prop="name"></el-input>
          </el-form-item>
          <el-form-item label="轮播图简介" prop="desc">
            <el-input v-model="ruleForm.desc"></el-input>
          </el-form-item>
          <el-form-item label="图片">
            <div class="demo-image__preview">
              <el-image style="width: 100px; height: 100px" :src="ruleForm.imageUrl">
              </el-image>
            </div>
          </el-form-item>
        </el-form>
        <!-- 底部区 -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="editDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="editPicInfo()">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
  import jwtDecode from 'jwt-decode'
  export default {
    data() {
      return {
        isTrue: false,
        tableData: [],
        // 获取用户列表的参数
        queryInfo: {
          // 关键字
          query: '',
          // 当前的页数
          pagenum: 1,
          // 当前每页显示多少条数据
          pagesize: 5
        },
        total: 0,
        // 修改账号对话框的表单数据
        ruleForm: {
          name: '',
          desc: '',
          imageUrl: ''
        },
        // 控制修改对话框
        editDialogVisible: false,
        // 轮播图修改的验证规则
        rules: {
          // 验证轮播图名称是否合法
          name: [{
              required: true,
              message: '请输入轮播图名称',
              trigger: 'blur'
            },
            {
              min: 2,
              max: 18,
              message: '轮播图名称长度最少2个字符，最多18个字符',
              trigger: 'blur'
            }
          ],
          desc: [{
            min: 2,
            max: 30,
            message: '轮播图简介字数控制在2-30个',
            trigger: 'blur'
          }]
        }
      }
    },
    created() {
      this.getPicList()
      const tokenStr = window.sessionStorage.getItem('token')
      const decode = jwtDecode(tokenStr)
      if (decode.scope !== '超级管理员') {
        this.isTrue = true
      }
    },
    methods: {
      // 根据id删除对应的轮播图
      async removePicById(id) {
        // 弹框提示轮播图是否删除
        const confirmResult = await this.$confirm(
          '此操作将永久删除这轮播图, 是否继续?',
          '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        ).catch(err => err)
        // 如果用户确定了  返回confirm     如果用户取消了 返回cancel
        if (confirmResult !== 'confirm') {
          return this.$message.info('已取消删除！')
        }
        const u = await this.$http.delete(`ordering/pics/${id}`)
        if (u.status !== 200) {
          this.$message.error('删除轮播图失败！')
        }
        this.getPicList()
        this.$message.success('删除轮播图成功！')
      },
      // 修改轮播图信息
      editPicInfo() {
        this.$refs.ruleForm.validate(async valid => {
          if (!valid) return
          // 可以发起修改轮播图的网络请求
          const u = await this.$http.put(`/ordering/pics/${this.ruleForm.id}`, {
            name: this.ruleForm.name,
            desc: this.ruleForm.desc,
            imageUrl: this.ruleForm.imageUrl
          })
          if (u.status !== 200) {
            return this.$message.error('修改轮播图信息失败！')
          }

          // 隐藏修改轮播图的对话框
          this.editDialogVisible = false
          // 重新获取轮播图列表数据
          this.getPicList()
          this.$message.success('修改轮播图信息成功！')
        })
      },
      // 展示修改的对话框
      async showEditDialog(id) {
        const u = await this.$http.get('/ordering/pics/' + id)
        if (u.status !== 200) {
          return this.$message.error('获取轮播图信息失败！')
        }
        this.ruleForm = u.data
        this.editDialogVisible = true
      },
      // 监听修改对话框的关闭事件
      editDialogClosed() {
        this.$refs.ruleForm.resetFields()
      },
      // 获取列表数据
      async getPicList() {
        const u = await this.$http.get('/ordering/pics', {
          params: this.queryInfo
        })
        if (u.status !== 200) {
          return this.$message.error('获取轮播图列表失败！')
        }
        this.tableData = u.data.picList
        this.total = u.data.total
        this.$message.success('获取轮播图列表成功')
      },
      // 监听改变每页显示多少条数据
      handleSizeChange(newSize) {
        this.queryInfo.pagesize = newSize
        this.getPicList()
      },
      // 监听改变当前页码
      handleCurrentChange(newPage) {
        this.queryInfo.pagenum = newPage
        this.getPicList()
      }
    }
  }
</script>

<style lang="scss" scoped>
</style>
